<template>
  <el-card shadow="never">
    <el-row>
      <el-col :span="12">
        <el-radio-group v-model="tabPosition">
          <el-radio-button value="1">内部项目</el-radio-button>
          <el-radio-button value="2">外部项目</el-radio-button>
          <el-radio-button value="3">零星采购项目</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-form style="margin-top: 1%">
      <el-row>
        <el-col :span="6">
          <el-form-item label="项目名称" style="width: 85%">
            <el-input v-model="searchForm.projectName" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="6" style="display: inline">
          <el-button
            color="#1E3485"
            size="small"
            :icon="Search"
            @click="
              tablePage.currentPage = 1;
              getList();
            "
            >搜索</el-button
          >
        </el-col>
        <el-col :span="12" style="display: inline; text-align: right">
          <el-button
            color="#1E3485"
            size="small"
            :icon="Edit"
            @click="showProjectDetailDialog('add')"
            >新建</el-button
          >
          <el-button
            type="success"
            size="small"
            :icon="Refresh"
            @click="synchronData()"
            >同步</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      border
      min-height="300px"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="tableData"
      :loading="tableLoading"
      :pager-config="tablePage"
      size="mini"
    >
      <vxe-column
        type="seq"
        title="序号"
        min-width="50"
        align="center"
        fixed="left"
      />
      <div v-if="tabPosition === '1'">
        <vxe-column
          v-for="column in tableColumnsForInsert"
          :key="column.field"
          header-align="center"
          :field="column.field"
          :title="column.title"
          :align="column.align"
          :min-width="column.width"
          show-overflow
        >
          <template v-slot:default="{ row }">
            {{ row[column.field] }}
          </template>
        </vxe-column>
      </div>
      <div v-if="tabPosition === '2'">
        <vxe-column
          v-for="column in tableColumnsForOut"
          :key="column.field"
          header-align="center"
          :field="column.field"
          :title="column.title"
          :align="column.align"
          :min-width="column.width"
          show-overflow
        >
          <template v-slot:default="{ row }">
            {{ row[column.field] }}
          </template>
        </vxe-column>
      </div>
      <div v-if="tabPosition === '3'">
        <vxe-column
          v-for="column in tableColumnsForProcure"
          :key="column.field"
          header-align="center"
          :field="column.field"
          :title="column.title"
          :align="column.align"
          :min-width="column.width"
          show-overflow
        >
          <template v-slot:default="{ row }">
            {{ row[column.field] }}
          </template>
        </vxe-column>
      </div>
      <vxe-column
        v-if="tabPosition != '3'"
        title="操作"
        min-width="250"
        align="center"
        fixed="right"
      >
        <template v-slot:default="{ row }">
          <vxe-button
            type="text"
            size="small"
            @click="showProjectDetailDialog('detail', row.id)"
            >查看</vxe-button
          >
          <vxe-button
            type="text"
            size="small"
            @click="showProjectDetailDialog('update', row.id)"
            >编辑</vxe-button
          >
          <vxe-button type="text" size="small" @click="delProject(row.id)"
            >删除</vxe-button
          >
          <vxe-button
            type="text"
            size="small"
            @click="showProjectMemberDialog(row.id)"
            >项目成员</vxe-button
          >
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      v-model:current-page="tablePage.currentPage"
      v-model:page-size="tablePage.pageSize"
      :layouts="[
        'Sizes',
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'FullJump',
        'Total'
      ]"
      :total="tablePage.total"
      size="mini"
      style="margin-top: 2%"
      @page-change="handlePageChange"
    />
    <div class="dialogs">
      <projectDetailDialog
        :id="pjctDtlDialogId"
        :type="pjctDtlDialogType"
        :projectType="projectType"
        :visible="pjctDtlDialogVisible"
        @close="closeProjectDetailDialog"
      />
      <projectMemberDialog
        :id="pjctMemberDialogId"
        :visible="pjctMemberDialogVisible"
        @close="closeProjectMemberDialog"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import { Refresh, Search, Edit } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { VxePagerEvents } from "vxe-table";
import projectDetailDialog from "./components/dialog/projectDetailDialog.vue";
import projectMemberDialog from "./components/dialog/projectMemberDialog.vue";
import { getProjectList } from "@/api/ERP_public";
import { delProjectInfo } from "@/api/ERP_baseMessage";
import { de } from "element-plus/es/locale/index.mjs";

///////////////////////// 公共 /////////////////////////
// 标签页
let tabPosition = ref("1");
///////////////////////// 数据准备 /////////////////////////
// 搜索表单
let searchForm = reactive({
  projectName: ""
});
// 表格内容
let tableData = ref([]);
let tableLoading = ref(false);
let tableColumnsForInsert = reactive([
  {
    field: "projectCode",
    title: "项目编码",
    width: 200,
    align: "left"
  },
  {
    field: "projectName",
    title: "项目名称",
    width: 200,
    align: "left"
  },
  {
    field: "orgName",
    title: "所属分公司",
    width: 200,
    align: "left"
  },
  {
    field: "purchaseDeptName",
    title: "采购单位",
    width: 200,
    align: "left"
  },
  {
    field: "projectAddress",
    title: "项目所在地",
    width: 200,
    align: "left"
  }
]);
let tableColumnsForOut = reactive([
  {
    field: "projectCode",
    title: "项目编码",
    width: 200,
    align: "left"
  },
  {
    field: "projectName",
    title: "项目名称",
    width: 200,
    align: "left"
  },
  {
    field: "purchaseDeptName",
    title: "采购单位",
    width: 200,
    align: "left"
  },
  {
    field: "projectAddress",
    title: "项目所在地",
    width: 200,
    align: "left"
  }
]);
let tableColumnsForProcure = reactive([
  {
    field: "projectCode",
    title: "项目编码",
    width: 200,
    align: "left"
  },
  {
    field: "projectName",
    title: "项目名称",
    width: 200,
    align: "left"
  },
  {
    field: "purchaseDeptName",
    title: "采购单位",
    width: 200,
    align: "left"
  },
  {
    field: "projectAddress",
    title: "项目所在地",
    width: 200,
    align: "left"
  }
]);
// 表格分页配置
let tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 15
});
// 表格分页事件
const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  getList();
};
///////////////////////// 弹窗类 /////////////////////////
// 项目详情弹窗
let pjctDtlDialogVisible = ref(false);
let pjctDtlDialogType = ref("");
let pjctDtlDialogId = ref("");
let projectType = ref("");
function showProjectDetailDialog(type?: string, id?: string) {
  if (type) pjctDtlDialogType.value = type;
  if (id) pjctDtlDialogId.value = id;
  switch (tabPosition.value) {
    case "1":
      projectType.value = "1";
      break;
    case "2":
      projectType.value = "2";
      break;
    case "3":
      projectType.value = "3";
      break;
    default:
      break;
  }
  pjctDtlDialogVisible.value = true;
}
function closeProjectDetailDialog(val: boolean) {
  pjctDtlDialogVisible.value = val;
  getList();
}
// 项目人员弹窗
let pjctMemberDialogVisible = ref(false);
let pjctMemberDialogId = ref("");
function showProjectMemberDialog(id: string) {
  pjctMemberDialogId.value = id;
  pjctMemberDialogVisible.value = true;
}
function closeProjectMemberDialog(val: boolean) {
  pjctMemberDialogVisible.value = val;
}
///////////////////////// 数据请求 /////////////////////////
// 获取表格数据
async function getList() {
  tableLoading.value = true;
  let params: ApiParams = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    projectName: searchForm.projectName,
    projectType: tabPosition.value
  };
  const response: ApiResponse = await getProjectList(params);
  if (response.code === 200) {
    tableData.value = response.data.records;
    tablePage.total = response.data.total;
  } else {
    ElMessage.error(response.msg);
  }
  tableLoading.value = false;
}
// 同步
async function synchronData() {
  ElMessage.warning("功能暂不可用！");
}
// 删除
async function delProject(id: string) {
  ElMessageBox.confirm("确定删除这个项目吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    tableLoading.value = true;
    let params: ApiParams = {};
    params.id = id;
    try {
      const response: ApiResponse = await delProjectInfo(params);
      if (response.code === 200) {
        ElMessage.success("删除成功");
        getList();
      } else {
        ElMessage.error("删除失败: " + response.msg);
      }
    } catch (error) {
    } finally {
      tableLoading.value = false;
    }
  });
}
///////////////////////// 公共 /////////////////////////
// 当 tabPosition 改变时，重新获取数据
watch(tabPosition, async (newVal, oldVal) => {
  await getList();
});
// 初始化
onMounted(async () => {
  await getList();
});
</script>

<style lang="scss" scoped></style>
